<template>
  <el-container>
    <el-aside width="200px">
      <el-scrollbar wrap-style="height:calc(100vh - 175px);">
        <el-tree
          ref="treeEl"
          style="max-width: 600px"
          node-key="id"
          :props="treeProps"
          :load="loadNode"
          :expand-on-click-node="false"
          lazy
          @node-click="clickTreeNode"
        >
          <template #default="{ node }">
            <Icon icon="ph:map-pin-area-fill" color="#CC0000" hoverColor="#CC0000" />
            <span class="ml-1">{{ node.label }}</span>
          </template>
        </el-tree>
      </el-scrollbar>
    </el-aside>
    <WsmTable
      ref="table"
      load-url="/dbms-server/base/areacode/page"
      :convert="convert"
      :change-load="true"
      v-model="queryFormType"
    >
      <template #title>{{ title }}</template>
      <template #query="{ data }">
        <el-form-item :label="t('dbms.areaManager.id')">
          <el-input v-model="data.id.value" />
        </el-form-item>
        <el-form-item :label="t('dbms.areaManager.state')">
          <el-radio-group v-model="data.state.value">
            <el-radio value="">{{ t('dbms.areaManager.all') }}</el-radio>
            <el-radio value="0">{{ t('dbms.areaManager.old') }}</el-radio>
            <el-radio value="1">{{ t('dbms.areaManager.new') }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </template>
      <template #button>
        <el-button type="primary" v-hasPermi="'init'" @click="initForm.show()">{{
          t('dbms.areaManager.initTitle')
        }}</el-button>
      </template>
      <template #column>
        <el-table-column prop="state" :label="t('dbms.areaManager.state')" width="90">
          <template #default="scope">
            <template v-if="scope.row.state == 1">
              <el-tag type="success">{{ t('dbms.areaManager.new') }}</el-tag>
            </template>
            <template v-else>
              <el-tag type="info">{{ t('dbms.areaManager.old') }}</el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="areaYear" :label="t('dbms.areaManager.areaYear')" width="90" />
        <el-table-column prop="level" :label="t('dbms.areaManager.level')" width="90" />
        <el-table-column prop="id" :label="t('dbms.areaManager.id')" width="180" />
        <el-table-column prop="code" :label="t('dbms.areaManager.code')" width="180" />
        <el-table-column prop="name" :label="t('dbms.areaManager.name')" width="180" />
        <el-table-column prop="address" :label="t('dbms.areaManager.address')" />
        <el-table-column prop="areaType" :label="t('dbms.areaManager.areaType')" width="100" />
      </template>
    </WsmTable>
  </el-container>

  <WsmForm
    ref="initForm"
    v-model="initFormData"
    submit-url="/dbms-server/base/areacode/init"
    label-width="130px"
    :title="t('dbms.areaManager.initTitle')"
    :init-data="initData"
    @success="flushed"
  >
    <template #default="{ form }">
      <div style="color: red">
        说明：可以点击国家统计局地址进入国家统计局官网，把相应年份的地址输入文本框中进行更新相应年份的地址。也可以不改变输入框地址，会默认更新最新发布的地址信息。
        <a href="https://www.stats.gov.cn/sj/tjbz/qhdm/" target="_blank">国家统计局地址</a>
        <br /><br />
      </div>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="url" :label="t('dbms.areaManager.url')">
            <el-input v-model="form.url" :placeholder="t('dbms.areaManager.url')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="type" :label="t('dbms.areaManager.type')">
            <el-radio-group v-model="form.type">
              <el-radio value="ALL">{{ t('dbms.areaManager.allYear') }}</el-radio>
              <el-radio value="NEW">{{ t('dbms.areaManager.newYear') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </WsmForm>
</template>
<script setup lang="ts">
import { WsmTable } from '@/components/WsmTable'
import { WsmForm } from '@/components/WsmForm'
import { ConvertType, QueryFormType, QueryType } from '@/components/WsmTable/src/types'
import { getTreeChildApi } from '@/api/dbms/areamanager'
import { ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { FormDataType } from '@/components/WsmForm/src/types'
import { ElTree } from 'element-plus'
import type Node from 'element-plus/es/components/tree/src/model/node'

const { t } = useI18n()

const title = ref(t('dbms.areaManager.title'))

//表格对象
const table = ref()

//新增表单对象
const initForm = ref()
const initData: FormDataType = {
  type: 'NEW',
  url: 'https://www.stats.gov.cn/sj/tjbz/qhdm/'
}
const initFormData: FormDataType = {
  type: 'NEW',
  url: ''
}

//查询定义
const queryFormType: QueryFormType = {
  parentId: {
    value: 'root',
    clear: false
  },
  state: {
    value: '',
    queryType: QueryType.EQ
  },
  id: {
    value: '',
    queryType: QueryType.LIKE_R
  }
}

const convert: ConvertType = {
  dicConvert: [
    { name: 'areaType', code: 'AreaType' },
    { name: 'level', code: 'AreaLevel' }
  ]
}

//树配置项
const treeProps = {
  label: 'name',
  isLeaf: 'isLeaf'
}

const treeEl = ref<InstanceType<typeof ElTree>>()

//加载树代码
const loadNode = async (node: Node, resolve: (data: []) => void) => {
  if (node.level == 0) {
    const rs = await getTreeChildApi('root')
    if (rs.success) {
      return resolve(rs.data)
    }
  }
  const rs = await getTreeChildApi(node.data.id)
  if (rs.success) {
    return resolve(rs.data)
  }
}

//树的点击事件
const clickTreeNode = (data) => {
  queryFormType.parentId.value = data.id
  title.value = data.address + '(' + data.id + ')'
  table.value.load(1)
}
const flushed = () => {
  table.value.load(1)
}
</script>

<style scoped></style>
